<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../image/pic.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="footer.html">
    <title>Document</title>
    <style>
        iframe{width: 100%;display: block;}
        header{
            height: 31px;
            color: #eee;
            font-size: 12px;
            background-color: #000;
        }
        .top{
            width: 1090px;
            height: 31px;
            overflow: hidden;
            margin: 0 auto;
        }
        .top ul li{
            float: left;
            font-size: 12px;
            height: 100%;
            line-height: 30px;
        }
        .top ul li a{
            margin-left: 16px;
        }
        .nav ul li{
            padding: 0 14px;
        }
        .sign ul li:nth-child(4){
            margin-left: 24px;
        }
        .sign ul li a{
            cursor: pointer;
        }
        .main{
            width: 1090px;
            margin: 0 auto;
            height: 110px;
        }
        .checks{
            margin:36px 30px 0 120px;
        }
        .main>img{
            margin-top: 25px;
        }
        .sou{
            width: 430px;
            height: 36px;
            border: 0;
            outline: none;
            border-radius: 15px;
            margin-left: 10px;
        }
        h1{width: 500px;
            height: 40px;   
            border: #e42542 2px solid;
            border-radius: 15px;
        }

        .checks .tu{
            width: 54px;
            height: 40px;
            border-radius: 14px;
            
            background-color: #e42542;
        }
        .main .buy a{
            display: inline-block;
            height: 40px;
            width: 110px;
            color: #000;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            margin-top: 33px;
            border: 2px solid #e42542;
            margin-right: 80px;
        }
        footer{
            width: 1090px;
            height: 41px;
            margin: 0 auto;
            clear: both;
        }
        footer h2{
            color: #fff;
            font-size: 16px;
            width: 164px;
            height: 41px;
            line-height: 41px;
            text-align: center;
            background-color: #e42542;
        }
        .foot ul li{
            float: left;
            margin-top: 8px;
        }
        .foot ul li a{
            color: #000;
            font-weight: 800;
            padding:0 20px; 
        }
        .foot ul li a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <header>
        <div class="top">
            <div class="sign">
                <ul>
                    <li>考拉欢迎你！</li>
                    <li>
                        <a href="#">登录</a>
                    </li>
                    <li>
                        <a href="#">注册</a>
                    </li>
                    <li>手机考拉</li>
                </ul>
            </div>
            <div class="nav r">
                <ul>
                    <li>每日签到</li>
                    <li>我的订单</li>
                    <li>个人中心</li>
                    <li>客户服务</li>
                    <li>充值中心</li>
                    <li>消费者权益</li>
                    <li>更多</li>
                    <li>视频内容</li>
                </ul>
            </div>
        </div>
    </header>
    <section>
        <div class="main">
            <img src="../image/logo.png" alt="" class="l">
            <div class="checks l">
               
                <h1>
                    <input type="text" class="sou" placeholder="搜索一下">
                    <p class="r tu"></p>
                </h1>
            </div>
            <div class="buy r">
                <a href="#">购物车</a>
            </div>
        </div>
    </section>
    <footer>
        <div class="foot">
            <h2 class="l">所有分类</h2>
            <ul class="l">
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">海外直购</a>
                </li>
                <li>
                    <a href="">品质奶粉</a>

                </li>
                <li>
                    <a href="">人气面膜</a>
                </li>
                <li>
                    <a href="">充值</a>
                </li>
            </ul>
        </div>
    </footer>

    <style>
        .mainnav{width: 1090px;margin: 0 auto;font-size: 13px;}
        dl{width: 180px;padding: 20px 0;}
        dd{margin-top: 15px;font-size: 13px;}
        dt{font-size: 13px;margin-top: 10px;}
        .mainnav ul{padding: 20px 0;}
        .mainnav ul li a{font-size: 14px;font-weight: 600;padding: 0 30px;color: #000;}
        .mainnav ul li a:hover{color: #f22;}
        .mainnav ul li .recycle{font-size: 13px;color: #999;float: right;margin: 15px 20px;}
        .wuping{
            width: 905px;
            height: 121px; 
            display: flex;
            justify-content: space-around;
            align-items: center;  
            border: 1px solid #e3e3e3; 
        }
        .intro{
            line-height: 22px;
            width: 140px;
            color: #333;
            font-size: 12px;
            font-weight: 500;
            margin: 25px 0 0 0;
            /* overflow: hidden; */
            white-space: wrap;
            text-overflow: ellipsis;
        }
        .photopec,.photopec img{height: 70px;width: 70px;margin-top: 10px;}
        .massage{background-color: #e3e3e3;height: 35px;line-height: 35px;font-size: 12px;color: #999;}
        .massage span{padding: 0 25px;}
        .two{height: 35px;line-height: 35px;}
        .pay{width: 80px;margin: 30px 0 0 45%; background-color: rgb(190, 40, 40);color: #fff;text-align: center;height: 30px;line-height: 30px;border-radius: 15px;}
        
        .other{clear: both;}
        .other h4 p{font-size: 15px;font-weight: 600;height: 30px;line-height: 30px;}
        .other h4 p i{font-size: 12px;color: #999;padding: 20px;font-weight: 500;}
        .other ul{
            clear: both;
            width: 1012px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .other ul li{
            width: 19%;
            height: 284px;
            border: 1px solid #999;
            float: left;
            margin-left: 8px;
            margin-bottom: 12px;
        }
        .other ul li .photo img{width: 100%;cursor: pointer;}
        .order{width: 180px;height: 50px;font-size: 18px;font-weight: 600;cursor: pointer;margin: 20px 0 19px 20px; color: #fff; background-color: #e42542;text-align:center;line-height:50px;}
        .other ul li span img{width: 30px;height: 30px;cursor: pointer; margin-right: 20px;margin-top: 15px;}
    </style>
    <div class="mainnav">
        <dl class="l">个人中心
            <dd>我的订单
                <dt>我的优惠券</dt>
                <dt>我红包</dt>
                <dt>我的考拉豆</dt>
            </dd>
            <dd>账号管理
                <dt>实名认证</dt>
                <dt>发票抬头</dt>
                <dt>收货地址</dt>
            </dd>
            <dd>
                <dt>收藏的商品</dt>
                <dt>关注的品牌</dt>
            </dd>
        </dl>
        <ul class="l">
            <li>
                <a href="">所有订单</a>
                <a href="">待付款</a>
                <a href="">待收货</a>
                <a href="">待发货</a>
                <a href="">待评价</a>
                <span class="recycle">订单回收站</span>
            </li>
            <li class="two">
                <input type="text" placeholder="输入商品名称或订单搜索"><button>搜索</button>
                <span>下单时间</span>
            </li>
            <li class="massage">
                <span>自营保税仓</span>
                <span>订单号2020102459024357</span>
                <span>下单时间：2020-09-28</span>
            </li>
            <li>
                <div class="wuping">
                    <div class="before">        
                        <div class="photopec l">
                        </div>
                        <p class="intro l"></p>
                    </div>
                    
                    <span class="cost">880</span>
                    <p class="count">
                        
                    </p>
                    <p class="xiaoji">已支付</p>
                    <span class="del">再次购买</span>
            </li>
            <li>
                <p class="pay">立即支付</p>
            </li>
        </ul>
        <div class="other">
            <h4>
                <p>猜你喜欢 <i>根据你的浏览记录推荐</i></p>
            </h4>
            <ul>
                <li id="template">
                    <div class="photo"><img src="../image/details1.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details2.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details3.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details4.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details5.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details6.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details7.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details8.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details9.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details10.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details11.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details12.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details13.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details14.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details15.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
            </ul>
        </div>
    </div>
    </div>
    
    <iframe src="footer.html" scrolling="no" frameborder="0"></iframe>
    <script src="../js/jquery.min.js"></script>
    <script>
        var ad = location.href.split("=")[1];
        $.ajax({
                url:`http://127.0.0.1:82/order?ad=${ad}`,
                success(data){
                    data = JSON.parse(data)
                    $(".intro").html(data[0].introduce)
                    $(".wuping .count").html(data[0].pirce)
                    $(".photopec").html(`<img src="../image/details${ad}.jpg">`);
                }
            })

        $(".pay").click(function(){
            location.href = `http://127.0.0.1:82/html/paysuccess.html`;
        })
        
    </script>
</body>
</html>